<template>
  <div class="container1" :class="{ print: type == '打印' }">
    <DocHeader fromDoc="handoverRecord" :title="title" :bottomBorder="false">
    </DocHeader>
    <div class="box">
      <div class="item">
        <div class="label">患者病情</div>
        <div class="content">
          <div class="row">1、生命体态：</div>
          <div class="row">
            T：
            <el-input
              v-model="pageData.disease.t"
              style="width: 40px"
            ></el-input>
            度(℃)
            <span class="space2"></span>
            P：
            <el-input
              v-model="pageData.disease.p"
              style="width: 40px"
            ></el-input>
            次/分
            <span class="space2"></span>
            R：
            <el-input
              v-model="pageData.disease.r"
              style="width: 40px"
            ></el-input>
            次/分
            <span class="space2"></span>
            BP：
            <el-input
              v-model="pageData.disease.bp"
              style="width: 80px"
            ></el-input>
            mmHg
            <span class="space2"></span>
            SPO₂：
            <el-input
              v-model="pageData.disease.spo2"
              style="width: 40px"
            ></el-input>
            %
          </div>
          <div class="row">
            2、意识状态：
            <el-radio-group v-model="pageData.disease.awareness">
              <el-radio label="清楚"></el-radio>
              <el-radio label="嗜睡"></el-radio>
              <el-radio label="模糊或昏睡"></el-radio>
              <el-radio label="浅昏迷"></el-radio>
              <el-radio label="深昏迷"></el-radio>
            </el-radio-group>
          </div>
          <div class="row" style="padding-left: 100px">
            瞳孔：左
            <el-input v-model="pageData.disease.pupil_l"></el-input>
            mm
            <span class="space"></span>
            右
            <el-input v-model="pageData.disease.pupil_r"></el-input>
            mm
          </div>
          <div class="row">
            对光反射：
            <div style="display: flex">
              <span>左：</span>
              <el-radio-group v-model="pageData.disease.left_light_reflex">
                <el-radio label="灵敏"></el-radio>
                <el-radio label="迟钝"></el-radio>
                <el-radio label="消失"></el-radio>
              </el-radio-group>
            </div>
            <div style="display: flex; padding-left: 20px">
              <span>右：</span>
              <el-radio-group v-model="pageData.disease.right_light_reflex">
                <el-radio label="灵敏"></el-radio>
                <el-radio label="迟钝"></el-radio>
                <el-radio label="消失"></el-radio>
              </el-radio-group>
            </div>
          </div>
        </div>
      </div>
      <div class="item">
        <div class="label">各种管道</div>
        <div class="content">
          <div class="row">
            静脉输液：
            <el-radio-group v-model="pageData.pipe.jmsy">
              <el-radio label="无"></el-radio>
              <el-radio label="有"></el-radio>
            </el-radio-group>
            <span class="space"></span>
            <el-input v-model="pageData.pipe.jmsy_road"></el-input>
            路
            <span class="space"></span>
            剩余体液总量
            <el-input v-model="pageData.pipe.jmsy_total"></el-input>
            ml
          </div>
          <div class="row">
            静脉通路部位：
            <el-radio-group v-model="pageData.pipe.jmtl">
              <el-radio label="上肢"></el-radio>
              <el-radio label="下肢"></el-radio>
              <el-radio label="颈内外"></el-radio>
              <el-radio label="股静脉"></el-radio>
            </el-radio-group>
          </div>
          <div class="row">
            微泵1：
            <el-radio-group v-model="pageData.pipe.wb1">
              <el-radio label="无"></el-radio>
              <el-radio label="有"></el-radio>
            </el-radio-group>
            <span class="space"></span>
            药名
            <el-input
              v-model="pageData.pipe.wb1_drug_name"
              style="width: 100px"
            ></el-input>
            <span class="space"></span>
            剩余总量
            <el-input v-model="pageData.pipe.wb1_remaining"></el-input>
            ml
            <span class="space"></span>
            走速
            <el-input v-model="pageData.pipe.wb1_speed"></el-input>
            ml/h
          </div>
          <div class="row">
            微泵2：
            <el-radio-group v-model="pageData.pipe.wb2">
              <el-radio label="无"></el-radio>
              <el-radio label="有"></el-radio>
            </el-radio-group>
            <span class="space"></span>
            药名
            <el-input
              v-model="pageData.pipe.wb2_drug_name"
              style="width: 100px"
            ></el-input>
            <span class="space"></span>
            剩余总量
            <el-input v-model="pageData.pipe.wb2_remaining"></el-input>
            ml
            <span class="space"></span>
            走速
            <el-input v-model="pageData.pipe.wb2_speed"></el-input>
            ml/h
          </div>
          <div class="row">
            吸氧方式：
            <el-radio-group v-model="pageData.pipe.xyfs">
              <el-radio label="鼻导管"></el-radio>
              <el-radio label="普通面罩"></el-radio>
              <!-- <el-radio label="模糊或昏睡"></el-radio> -->
              <el-radio label="氧袋面罩"></el-radio>
              <el-radio label="可控式面罩"></el-radio>
              <el-radio label="呼吸皮囊"></el-radio>
            </el-radio-group>
          </div>
          <div class="row">
            人工气道：
            <el-radio-group v-model="pageData.pipe.rgqd">
              <el-radio label="无"></el-radio>
              <el-radio label="有"></el-radio>
            </el-radio-group>
            <span class="space"></span>
            <el-radio-group v-model="pageData.pipe.rgqd_type">
              <el-radio label="切开"></el-radio>
              <el-radio label="口插管"></el-radio>
              <el-radio label="鼻插管"></el-radio>
            </el-radio-group>
          </div>
          <div class="row" style="padding-left: 100px">
            气管插管距门齿距离
            <el-input v-model="pageData.pipe.rgqd_distance"></el-input>
            厘米
          </div>
          <div class="row">
            导尿管：
            <el-radio-group v-model="pageData.pipe.dng">
              <el-radio label="无"></el-radio>
              <el-radio label="有"></el-radio>
            </el-radio-group>
          </div>
          <div class="row">
            胸腔闭式引流：
            <el-radio-group v-model="pageData.pipe.xqbsyl">
              <el-radio label="无"></el-radio>
              <el-radio label="有"></el-radio>
            </el-radio-group>
          </div>
          <div class="row">
            其它：
            <el-radio-group v-model="pageData.pipe.other">
              <el-radio label="无"></el-radio>
              <el-radio label="有"></el-radio>
            </el-radio-group>
          </div>
        </div>
      </div>
      <div class="item">
        <div class="label">皮肤状况</div>
        <div class="content">
          <div class="row">
            <el-radio-group v-model="pageData.skin.status">
              <el-radio label="完整"></el-radio>
              <el-radio label="有破损"></el-radio>
            </el-radio-group>
            <span class="space"></span>
            部位、面积
            <el-input
              v-model="pageData.skin.area"
              style="width: 300px"
            ></el-input>
          </div>
          <div class="row">
            其它
            <el-input
              v-model="pageData.skin.other"
              style="width: 500px"
            ></el-input>
          </div>
        </div>
      </div>
      <div class="item">
        <div class="label">辅助检查医疗文件</div>
        <div class="content">
          <div class="row">
            <el-checkbox-group v-model="pageData.auxiliary.file">
              <el-checkbox label="病历"></el-checkbox>
              <span class="space"></span>
              <el-checkbox label="X光片">
                X光片
                <el-input v-model="pageData.auxiliary.file_x_num"></el-input>
                张
              </el-checkbox>
              <span class="space"></span>
              <el-checkbox label="CT片">
                CT片
                <el-input v-model="pageData.auxiliary.file_ct_num"></el-input>
                张
              </el-checkbox>
              <span class="space"></span>
              <el-checkbox label="MRI片">
                MRI片
                <el-input v-model="pageData.auxiliary.file_mri_num"></el-input>
                张
              </el-checkbox>
              <br />
              <el-checkbox label="其它">
                其它
                <el-input
                  v-model="pageData.auxiliary.other"
                  style="width: 500px"
                ></el-input>
              </el-checkbox>
            </el-checkbox-group>
          </div>
          <div class="row">
            护理记录：
            <el-radio-group v-model="pageData.auxiliary.nursing_record">
              <el-radio label="完整"></el-radio>
              <el-radio label="不完整"></el-radio>
            </el-radio-group>
          </div>
        </div>
      </div>
      <div class="item">
        <div class="content">
          <div class="row">转送过程中发生的问题（请于转送完成后填写）：</div>
          <div class="row">
            <el-radio-group v-model="pageData.problem.status">
              <el-radio label="无"></el-radio>
              <el-radio label="有"
                >有，请继续勾选以下项目，并提出通报：</el-radio
              >
            </el-radio-group>
          </div>
          <div class="row">
            <el-checkbox-group v-model="pageData.problem.item">
              <el-checkbox label="呼吸停止"></el-checkbox>
              <el-checkbox label="心跳停止"></el-checkbox>
              <el-checkbox label="跌倒"></el-checkbox>
              <el-checkbox label="气管插管滑脱"></el-checkbox>
              <el-checkbox label="其它管滑脱">
                其它管滑脱
                <el-input
                  v-model="pageData.problem.pipe_slip"
                  style="width: 200px"
                ></el-input>
              </el-checkbox>
              <br />
              <el-checkbox label="其它">
                其它<el-input
                  v-model="pageData.problem.other"
                  style="width: 500px"
                ></el-input
              ></el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
      </div>
      <div class="item">
        <div class="content flex">
          <div>
            转出科室：
            <el-input
              v-model="pageData.out.department"
              style="width: 100px"
            ></el-input>
          </div>
          <div>
            护士签名：
            <div
              v-if="signPhoto(pageData.out.sign, 'nursingDocument', docType)"
              style="width: 100px"
            >
              <img
                :src="
                  'data:image/png;base64,' +
                  signPhoto(pageData.out.sign, 'nursingDocument', docType)
                "
                alt=""
                style="display: block; max-width: 98%; height: 24px"
                @click="handleSignImgClear('out')"
              />
            </div>
            <el-input
              v-else
              v-model="pageData.out.sign"
              style="width: 100px"
              @blur="handleSignInputBlur('out')"
            ></el-input>
          </div>
          <div>
            日期/时间：
            <DateSelection
              v-model="pageData.out.time"
              value-format="yyyy-MM-dd HH:mm"
              :simple-op="true"
              :date-picker-show="true"
              :date-show="true"
              :no-clear="true"
              :hasBorder="false"
              :needTimeIcon="false"
              :display-num="!pageData.out.time"
              style="padding: 0"
            />
          </div>
        </div>
      </div>
      <div class="item">
        <div class="content flex">
          <div>
            转入科室：
            <el-input
              v-model="pageData.in.department"
              style="width: 100px"
            ></el-input>
          </div>
          <div>
            护士签名：
            <div
              v-if="signPhoto(pageData.in.sign, 'nursingDocument', docType)"
              style="width: 100px"
            >
              <img
                :src="
                  'data:image/png;base64,' +
                  signPhoto(pageData.in.sign, 'nursingDocument', docType)
                "
                alt=""
                style="display: block; max-width: 98%; height: 24px"
                @click="handleSignImgClear('in')"
              />
            </div>
            <el-input
              v-else
              v-model="pageData.in.sign"
              style="width: 100px"
              @blur="handleSignInputBlur('in')"
            ></el-input>
          </div>
          <div>
            日期/时间：
            <DateSelection
              v-model="pageData.in.time"
              value-format="yyyy-MM-dd HH:mm"
              :simple-op="true"
              :date-picker-show="true"
              :date-show="true"
              :no-clear="true"
              :hasBorder="false"
              :needTimeIcon="false"
              :display-num="!pageData.in.time"
              style="padding: 0"
            />
          </div>
        </div>
      </div>
    </div>
    <div class="tip">
      备注：由转送科护士填写后，与患者转送时一同携带并与转入科室护士交接签名
    </div>
  </div>
</template>
<script>
import { cloneDeep } from 'lodash-unified'
import {
  computed,
  defineComponent,
  nextTick,
  onMounted,
  reactive,
  toRefs,
  watch
} from 'vue'

import DateSelection from '@/components/DateSelection/indexV2.vue'
import { useSign } from '@/hooks'
import { getStoreFromInstance } from '@/utils/instance'

import DocHeader from '../DocHeader.vue'
import { baseData } from './baseData.js'

export default defineComponent({
  components: {
    DocHeader,
    DateSelection
  },
  props: {
    data: {
      type: Object,
      default: () => ({})
    },
    title: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: ''
    },
    docType: {
      type: [String, Number],
      default: ''
    }
  },
  setup(props) {
    const state = reactive({
      pageData: cloneDeep(baseData)
    })

    const store = getStoreFromInstance()

    const { signPhoto, queryUserSignByName } = useSign()

    const user = computed(() => store.getters.user)

    function initData() {
      if (props.data.jsonText && props.data.jsonText !== '{}') {
        const jsonText = JSON.parse(props.data.jsonText)
        state.pageData = Object.assign(cloneDeep(baseData), jsonText)
      } else {
        nextTick(() => {
          const pageData = cloneDeep(baseData)
          state.pageData = pageData
        })
      }
    }

    function getParams() {
      return state.pageData
    }

    function handleSignInputBlur(key) {
      queryUserSignByName(
        [state.pageData[key].sign],
        'nursingDocument',
        props.docType
      )
    }

    function handleSignImgClear(key) {
      state.pageData[key].sign = ''
    }

    watch(
      () => props.data,
      () => {
        initData()
      }
    )

    onMounted(() => {
      initData()
    })

    return {
      ...toRefs(state),
      signPhoto,
      getParams,
      handleSignInputBlur,
      handleSignImgClear
    }
  }
})
</script>

<style lang="scss" scoped>
@import '@/views/doc/styles/doc-common.scss';
@import '@/views/doc/styles/doc-fix.scss';
$border: 1px solid #000;

.container1 {
  padding: 20px 0;
  line-height: 23px;
  font-family: SiYuanSong-Medium;
  text-align: start;

  .box {
    border: 1px solid #000;

    .item {
      border-top: 1px solid #000;
      display: flex;

      &:first-child {
        border-top: none;
      }

      .label {
        border-right: 1px solid #000;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 120px;
        flex-shrink: 0;
      }

      .content {
        padding: 10px 20px;

        .row {
          display: flex;
          margin-top: 10px;
          white-space: nowrap;

          &:first-child {
            margin-top: 0;
          }

          .space {
            display: inline-block;
            width: 30px;
          }

          .space2 {
            display: inline-block;
            width: 16px;
          }
        }
      }

      .flex {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;

        & > div {
          display: flex;
          align-items: center;
          line-height: 32px;
        }
      }
    }
  }

  .tip {
    margin-top: 10px;
  }
}

::v-deep {
  .el-radio-group {
    display: flex;
    align-items: center;
  }

  .el-input {
    width: 50px;
  }

  .el-input .el-input__inner {
    height: 20px;
    text-align: left;
    border-bottom: 1px solid #000;
    padding: 0 4px;
  }

  .el-input.is-disabled .el-input__inner {
    background-color: #fff;
  }

  input:disabled {
    color: #000;
    background: #fff;
  }
}
</style>
